<template>
  <div class="caitainer">
  <titleHead :Crumbs="Crumbs"></titleHead>
  <div class="box">
    <div class="title"> 系统日志 </div>
    <div class="tb">
      <div></div>
      <el-table
        :data="log_table"
        style="width: 100%;"
        class="Centered"
        border
      >
        <el-table-column type="index" width="120px" label="序号"></el-table-column>
        <el-table-column prop="loginName" label="用户名"></el-table-column>
        <el-table-column label="日志内容" prop="logContent"></el-table-column>
        <el-table-column label="操作时间" prop="time"></el-table-column>
      </el-table>
    </div>
      <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :page-size="size"
            :total="total"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
  </div>
  </div>
</template>
<script>
import titleHead from "@/views/title";
export default {
  data() {
    return {
        log_table:[],
        total:0,
        size:18,
        page:1,
          Crumbs:{
            router: [],
            path:["系统设置","系统日志"]
         }
    };
  },
  components:{
        titleHead
  },
  methods: {
   handleCurrentChange(e){
       this.page=e
       this.Journal()
   },
   Journal(){
       this.$http.get("/api/threesuns/opLog/list",{
           params:{
               page:this.page,
               size:this.size,
           }
       }).then(res=>{
         this.log_table=res.data.data
         this.total=res.data.total
       })
   }
  },
  mounted() {
      this.Journal()
  }
};
</script>
<style scoped>
@import url("../../../assets/css/table.css");
* {
  box-sizing: border-box;
}
.caitainer {
  position: relative;
  width: 100%;
  height: 100%;
  /* background: url("../../../assets/image/strategy_add.jpg"); */
  /* min-width: 1500px; */
}
/deep/ .del .el-button {
  padding: 8px 20px;
  border-radius: 0;
  background-color: #1d938d;
}
.del span {
  display: block;
  width: 100%;
  height: 100%;
}
.del :hover {
  cursor: pointer;
  color: #fff;
}
.tb {
  margin: 0 auto;
  width: 1414px;
  height:760px;
  padding-bottom: 15px;
  overflow-y: scroll;
}
.tb::-webkit-scrollbar{
  width: 3px;
}

.tb::-webkit-scrollbar-track{
  /* background: #ccc; */
  background: #1d938d;
}

.tb::-webkit-scrollbar-thumb{
  background: #fff;
}
.containerLast li span:nth-child(1) {
  width: 171px;
}
.block {
  text-align: center;
}
/deep/ .tb .el-table td,
.el-table th.is-leaf {
  padding: 6px 0;
}
.cell {
  text-align: center;
}
/deep/ .tb .cell {
  text-align: center;
}
.details_view {
  width: 1340px;
  color: #1d938d;
  margin: 100px auto;
}
.details_view > div {
  background-color: #0a7e7e;
  padding: 10px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.details_view i {
  float: right;
  color: #fff;
  margin-right: 30px;
  font-size: 20px;
  margin-top: 10px;
  font-style: normal;
}
.details_view :hover {
  cursor: pointer;
}
.details_view ul {
  height: 400px;
  padding-top: 10px;

  overflow-y: scroll;
}
.details_view li {
  padding: 10px;
  background-color: #ccc;
  margin-bottom: 10px;
  margin-left: 20px;
}
.details_view span {
  margin-right: 15px;
}
.Mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0px;
  left: 0;
  z-index: 5;
}
.tb:hover {
  cursor: pointer;
}
.title {
  height:40px;
  line-height: 40px;
  background-color: #0a7e7e;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
/deep/ .tb .el-table td {
  border-top:none;
}
.box {
  width: 1416px;
  margin: 0 auto;
  background: #042321;
  box-shadow: 0px 1px 14px 0px #0dc2c3 inset;

}
.box >.title {
  margin-top: 35px;
  text-align: center;
  font-size: 30px;
  height: 45px;
  line-height: 45px;
  color: #fff;
  font-weight: 700;
}
</style>
